import React from 'react';
import { Row, Col, Card, Statistic, Progress, Table, Tag } from 'antd';
import {
  UserOutlined,
  FileTextOutlined,
  RobotOutlined,
  ApiOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons';

const Dashboard: React.FC = () => {
  // 统计数据
  const stats = [
    {
      title: '总用户数',
      value: 1234,
      prefix: <UserOutlined />,
      suffix: <ArrowUpOutlined style={{ color: '#3f8600' }} />,
      suffixValue: '12%',
    },
    {
      title: '内容数量',
      value: 567,
      prefix: <FileTextOutlined />,
      suffix: <ArrowUpOutlined style={{ color: '#3f8600' }} />,
      suffixValue: '8%',
    },
    {
      title: 'AI调用次数',
      value: 8901,
      prefix: <RobotOutlined />,
      suffix: <ArrowUpOutlined style={{ color: '#3f8600' }} />,
      suffixValue: '15%',
    },
    {
      title: 'API请求数',
      value: 2345,
      prefix: <ApiOutlined />,
      suffix: <ArrowDownOutlined style={{ color: '#cf1322' }} />,
      suffixValue: '3%',
    },
  ];

  // 最近活动数据
  const recentActivities = [
    {
      key: '1',
      user: '张三',
      action: '创建了新内容',
      target: '《AI技术发展趋势》',
      time: '2分钟前',
      status: 'success',
    },
    {
      key: '2',
      user: '李四',
      action: '使用了AI生成',
      target: '内容生成工具',
      time: '5分钟前',
      status: 'processing',
    },
    {
      key: '3',
      user: '王五',
      action: '更新了API密钥',
      target: 'OpenAI API',
      time: '10分钟前',
      status: 'warning',
    },
    {
      key: '4',
      user: '赵六',
      action: '登录了系统',
      target: 'Web端',
      time: '15分钟前',
      status: 'default',
    },
  ];

  const activityColumns = [
    {
      title: '用户',
      dataIndex: 'user',
      key: 'user',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
    },
    {
      title: '目标',
      dataIndex: 'target',
      key: 'target',
    },
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          success: <Tag color="green">成功</Tag>,
          processing: <Tag color="blue">进行中</Tag>,
          warning: <Tag color="orange">警告</Tag>,
          default: <Tag color="default">普通</Tag>,
        };
        return statusMap[status as keyof typeof statusMap] || <Tag color="default">普通</Tag>;
      },
    },
  ];

  return (
    <div>
      <h2>仪表盘</h2>
      
      {/* 统计卡片 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        {stats.map((stat, index) => (
          <Col span={6} key={index}>
            <Card>
              <Statistic
                title={stat.title}
                value={stat.value}
                prefix={stat.prefix}
                suffix={stat.suffix}
                valueStyle={{ color: '#3f8600' }}
              />
              <div style={{ fontSize: 12, color: '#666', marginTop: 8 }}>
                较上周 {stat.suffixValue}
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      <Row gutter={16}>
        {/* 系统状态 */}
        <Col span={12}>
          <Card title="系统状态" style={{ marginBottom: 16 }}>
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>CPU使用率</span>
                <span>45%</span>
              </div>
              <Progress percent={45} status="active" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>内存使用率</span>
                <span>68%</span>
              </div>
              <Progress percent={68} status="active" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>磁盘使用率</span>
                <span>32%</span>
              </div>
              <Progress percent={32} />
            </div>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>网络状态</span>
                <span>正常</span>
              </div>
              <Progress percent={100} status="success" />
            </div>
          </Card>
        </Col>

        {/* 最近活动 */}
        <Col span={12}>
          <Card title="最近活动" style={{ marginBottom: 16 }}>
            <Table
              columns={activityColumns}
              dataSource={recentActivities}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>
      </Row>

      {/* 快速操作 */}
      <Row gutter={16}>
        <Col span={24}>
          <Card title="快速操作">
            <Row gutter={16}>
              <Col span={6}>
                <Card size="small" hoverable>
                  <div style={{ textAlign: 'center' }}>
                    <FileTextOutlined style={{ fontSize: 24, color: '#1890ff' }} />
                    <div style={{ marginTop: 8 }}>创建内容</div>
                  </div>
                </Card>
              </Col>
              <Col span={6}>
                <Card size="small" hoverable>
                  <div style={{ textAlign: 'center' }}>
                    <RobotOutlined style={{ fontSize: 24, color: '#52c41a' }} />
                    <div style={{ marginTop: 8 }}>AI对话</div>
                  </div>
                </Card>
              </Col>
              <Col span={6}>
                <Card size="small" hoverable>
                  <div style={{ textAlign: 'center' }}>
                    <ApiOutlined style={{ fontSize: 24, color: '#faad14' }} />
                    <div style={{ marginTop: 8 }}>API管理</div>
                  </div>
                </Card>
              </Col>
              <Col span={6}>
                <Card size="small" hoverable>
                  <div style={{ textAlign: 'center' }}>
                    <UserOutlined style={{ fontSize: 24, color: '#722ed1' }} />
                    <div style={{ marginTop: 8 }}>用户管理</div>
                  </div>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard; 